@import "../../sassmixins/mixins";

.container {
  background-image: url("../image/bg.jpg");
  background-size: 100% 100%;
  padding-top: px2rem-s(58px);
  padding-bottom: px2rem-s(50px);

  .top {
    @include size(10rem, px2rem-s(584px));
    background-image: url("../image/top.png");
    background-size: 100% 100%;
  }

  .btn-area {
    margin-top: px2rem-s(35px);
    height: px2rem-s(90px);
    position: relative;

    .btn {
      position: absolute;

      &.share {
        @include size(px2rem-s(205px), px2rem-s(70px));
        background-image: url("../image/shareone.png");
        background-size: 100% 100%;
        top: 0;
        left: px2rem-s(84px);
      }

      &.share-1 {
        @include size(px2rem-s(205px), px2rem-s(70px));
        background-image: url("../image/shareone.png");
        background-size: 100% 100%;
        top: 0;
        right: px2rem-s(212px);
      }

      &.join {
        @include size(px2rem-s(240px), px2rem-s(75px));
        background-image: url("../image/more.png");
        background-size: 100% 100%;
        top: 0;
        right: px2rem-s(57px);
      }
    }
  }

  .bottom {
    margin-top: px2rem-s(104px);
    @include size(10rem, px2rem-s(233px));
    background-image: url("../image/bottom.png");
    background-size: 100% 100%;
  }

  .more-btn {
    @include size(px2rem-s(312px), px2rem-s(82px));
    background-image: url("../image/more-btn.png");
    background-size: 100% 100%;
    @include center-block;
    margin-top: px2rem-s(14px);
  }
}

.share-dialog {
  @include square(100%);
  position: fixed;
  top: 0;
  left: 0;
  background-image: url("../image/tbg.png");
  display: none;

  .bg {
    @include size(10rem, px2rem-s(333px));
    background-image: url("../image/jiantou.png");
    background-size: 100% 100%;
  }
}

